<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader :arr='list' @addFn="addFun"></TodoHeader>
    <TodoMain :arr="getArr" @del="delFn"></TodoMain>
    <TodoFooter :arr="getArr"  @setFn="btn" @clear="clearFn"></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./第四天作业/TodoHeader";
import TodoMain from "./第四天作业/TodoMain";
import TodoFooter from "./第四天作业/TodoFooter";


export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data(){
    return {
      getSel:'all',  //默认显示全部  no 显示未完成  yes  显示已完成
      list:JSON.parse(localStorage.getItem('goodList')) || []
    };
  },
  methods:{
    // 删除任务
    delFn(index){
      this.list.splice(index, 1)
    },
    // 添加任务
    addFun(val){
       this.list.push({
         id:this.list.length > 0 ? this.list.at(-1).id + 1 : 100,
         name:val,
         isDone:false,
       })
    },
    // 切换  判断点击那个按钮
    btn(val){
       this.getSel = val
    },
    // 清除已完成
    clearFn(){
     this.list = this.list.filter(item => !item.isDone === true)
    }
  },
computed:{
  getArr(){
    if(this.getSel === 'yes' ) {
         return this.list.filter(item => item.isDone)
        }else if(this.getSel === 'no'){
         return this.list.filter(item => !item.isDone)
        } else {
         return this.list
        }
  },
},
watch:{
    list:{
      handler(){
        localStorage.setItem('goodList', JSON.stringify(this.list))
    },
    deep:true,
    } 
}
};
</script>